<!DOCTYPE html>
<!--    
# Copyright (c) 2011-2021 Contributors to the Eclipse Foundation
# 
# See the NOTICE file(s) distributed with this work for additional
# information regarding copyright ownership.
# 
# This program and the accompanying materials are made available under the
# terms of the Eclipse Public License 2.0 which is available at
# http://www.eclipse.org/legal/epl-2.0
# 
# SPDX-License-Identifier: EPL-2.0
#
-->
<html lang="en">

<head>
  <title>WebSphere MQTT Web client Tutorial</title> 
  <link rel="stylesheet" href="../style.css" type="text/css" />
  <script type="text/javascript" src="../WebSocket/mqttws31.js"></script>
  <script type="text/javascript" src="../WebSocket/tutorial.js"></script>
</head>
<body onload="load()")>
	<h1><img src="../logo.png" />
	First steps, the hello world application.</h1>
	<p>The example below is a simple javascript application that shows how to subscribe to a topic called "World" and publish a message 
	    containing the string "Hello" to it. 
    <br><h2>Example</h2>
    <!-- Everything in the table below is required for JS to work and provide expected functionality -->
	<table>
		<tr>		
	    <textarea id='newCode' rows="25" cols="100">
// Make  connection to the server, and set up a call backs used when the connection 
// is completed, when a message arrives for this client and when the connection is lost. 			
client = new Messaging.Client(location.hostname, Number(location.port), "clientId");
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect});

function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("/World");
  message = new Messaging.Message("Hello");
  message.destinationName = "/World";
  client.send(message); 
};
function onConnectionLost(reason) {
  if (reason)
    console.log("ConnectionLost:"+reason);
};
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
  client.disconnect(); 
};		
	</textarea>		
	</tr>
	<tr>
	<br>
	<input type='button' onclick='Try()' value='Click me to try.'>
	The Console output is shown below.
	</tr>
	<tr><div id='page'></div>			
	<form>
	<textarea id="console" readonly='readonly' rows="5" cols="100"></textarea>
	</form></tr>
		
	</table>
	
<div>
  <p><a href="Tutorial31_CompleteWebPage.html">Adding the application to a web page.</a></p>
  <p><a href="../index.html">Home.</a></p>
</div>
</body>
</html>
